/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState, useRef } from 'react';
import {
  ModalForm,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormDependency,
} from '@ant-design/pro-form';
import { getBrandList, getAreaInfoByBrand } from '@/services/jdk/shield';
import type { ProFormInstance } from '@ant-design/pro-form';
import { limitType, shieldType } from '../../utils/config';
import KbAddressSelect from '@/components/KbAddressSelect';
import type { WHITELIST_COLUMNS } from '../../..';
import { Button, Form } from 'antd';

interface KbModal {
  visible: boolean;
  record: WHITELIST_COLUMNS;
  onClose: () => void;
  onSubmit: (values: any) => Promise<void>;
}
const Index = ({ visible, record, onClose, onSubmit }: KbModal) => {
  const formRef = useRef<ProFormInstance>();
  const [showAddress, setShowAddress] = useState<boolean>(false);
  const [type, setType] = useState<string>('');
  const [options, setOptions] = useState<any>([]);

  const onAreaInfoByBrand = (brand: string, limit_type: number) => {
    getAreaInfoByBrand({ brand, limit_type }).then((res) => {
      const { data: { type: brandType = '', area_list = [] } = {} } = res;
      setType(brandType);
      setOptions(area_list);
    });
  };

  const onValuesChange = (changedValues: any, allValues: any) => {
    const { brand = '', use_type: limit_type } = allValues;
    formRef.current?.validateFields(['brand', 'use_type']);
    if (limit_type && brand && !record.id) {
      onAreaInfoByBrand(brand, limit_type);
    }
  };
  useEffect(() => {
    const { id } = record;
    if (!visible) return;
    if (!id) {
      setShowAddress(true);
    } else {
      onAreaInfoByBrand(record.brand, record.use_type);
      setShowAddress(false);
    }
  }, [visible]);
  return (
    <ModalForm
      title={!record.area ? '添加白名单' : '修改白名单'}
      width={700}
      layout='horizontal'
      formRef={formRef}
      modalProps={{
        onCancel: onClose,
        destroyOnClose: true,
      }}
      labelCol={{
        span: 5,
      }}
      submitter={false}
      requiredMark={false}
      visible={visible}
      onFinish={onSubmit}
      onValuesChange={onValuesChange}
      initialValues={record}
    >
      {showAddress ? (
        <>
          <ProFormText
            label='商家账号'
            name='phone'
            placeholder='请输入商家账号'
            rules={[{ required: true, message: '请输入商家账号' }]}
          />
          <ProFormSelect
            label='选择运力'
            name='brand'
            style={{ margin: '0' }}
            fieldProps={{
              allowClear: false,
            }}
            request={getBrandList}
            rules={[{ required: true, message: '请选择屏蔽运力' }]}
          />
          <ProFormRadio.Group
            label='运力类型'
            name='use_type'
            options={limitType}
            rules={[{ required: true, message: '请选择运力类型' }]}
          />
          <ProFormRadio.Group
            label='选择屏蔽类型'
            name='select_type'
            options={shieldType('whiteList')}
          />
        </>
      ) : null}
      <ProFormDependency name={['select_type']}>
        {({ select_type }) => {
          return select_type == 2 ? (
            `${type}` === '0' ? (
              <Form.Item
                label='选择区域'
                name='area'
                rules={[{ required: true, message: '请选择区域' }]}
              >
                <KbAddressSelect
                  multiple
                  multipleDisabled
                  level={2}
                  allowClear={false}
                  placeholder='请选择区域'
                  showArrow={true}
                />
              </Form.Item>
            ) : (
              <ProFormSelect
                label='选择区域'
                name='agent_area'
                rules={[{ required: true, message: '请选择区域' }]}
                fieldProps={{
                  mode: 'multiple',
                  options: options,
                  fieldNames: {
                    label: 'name',
                    value: 'code',
                  },
                  showArrow: true,
                }}
              />
            )
          ) : null;
        }}
      </ProFormDependency>

      <ProFormText readonly label=' ' colon={false}>
        注：如商家的店铺在运力屏蔽区域内，添加白名单后，可正常获取平台运力
      </ProFormText>
      <Form.Item label=' ' colon={false}>
        <Button htmlType='submit' type='primary'>
          保存
        </Button>
      </Form.Item>
    </ModalForm>
  );
};

export default Index;
